<template>
    <f7-page class="page-news-detail">
        <f7-navbar>
            <f7-nav-left back-link=" " sliding></f7-nav-left>
            <f7-nav-center></f7-nav-center>
            <f7-nav-right>
                <f7-link icon-fa="comment-o" class="i-with-badge" color="red" href="/news/commentList/">
                    <f7-badge color="red">1034</f7-badge>
                </f7-link>
                <f7-link icon-fa="ellipsis-h" open-picker="#articleOperation"></f7-link>
            </f7-nav-right>
        </f7-navbar>
        <div class="main">
            <h2>质疑新加坡司法体系 李显龙侄子被新加坡总检署调查</h2>
            <p class="author">作者：中国青年网</p>
            <div class="content">
                <p>第一段文本，简要说明一切问题，不能超过三分之一屏，保证图片在中部显示。不要太长啊，太长就分两段。</p>
                <img src="../../assets/images/test.jpg" alt="">
                <p>第一段文本，简要说明一切问题，不能超过三分之一屏，保证图片在中部显示。不要太长啊，太长就分两段。</p>
                <img src="../../assets/images/test.jpg" alt="">
                <p>第一段文本，简要说明一切问题，不能超过三分之一屏，保证图片在中部显示。不要太长啊，太长就分两段。</p>
                <img src="../../assets/images/test.jpg" alt="">
            </div>
        </div>
        <f7-toolbar tabbar labels class="comment-toolbar">
            <div class="edit-comment">
                <f7-icon fa="pencil" color="red"></f7-icon>
                <f7-input type="text" placeholder="写评论" icon-f7="chat" @click="openEditComment" readonly/>
            </div>
            <f7-link icon-fa="comment-o" class="i-with-badge icon-wrap" color="red" href="/news/commentList/">
                <f7-badge color="red">1034</f7-badge>
            </f7-link>
            <f7-link icon-fa="thumbs-up" class="i-with-badge icon-wrap">
                <f7-badge color="red">968</f7-badge>
            </f7-link>
            <f7-link icon-fa="share" class="icon-wrap" open-picker="#shareToCircle"></f7-link>
        </f7-toolbar>

        <f7-picker-modal id="shareToCircle" :overlay="true" class="share-to-circle">
            <p>推送到圈子</p>
            <ul>
                <li>
                    <f7-button round fill class="on">公开</f7-button>
                </li>
                <li>
                    <f7-button round fill>高中圈</f7-button>
                </li>
                <li>
                    <f7-button round fill>专业奶爸圈</f7-button>
                </li>
                <li>
                    <f7-button round fill>不可告人圈</f7-button>
                </li>
                <li>
                    <f7-button round fill>不公开</f7-button>
                </li>
            </ul>
            <f7-button class="btn-done" close-picker="#shareToCircle">完成</f7-button>
        </f7-picker-modal>

        <f7-picker-modal id="articleOperation" :overlay="true">
            <f7-grid>
                <f7-col width="20">
                    <f7-link icon-fa="weixin">微信好友</f7-link>
                </f7-col>
                <f7-col width="20">
                    <f7-link icon-fa="eercast">朋友圈</f7-link>
                </f7-col>
                <f7-col width="20">
                    <f7-link icon-fa="weibo">微博</f7-link>
                </f7-col>
            </f7-grid>
            <f7-grid>
                <f7-col width="20">
                    <f7-link icon-fa="volume-control-phone" @click="openAccusationAction">举报</f7-link>
                </f7-col>
                <f7-col width="20">
                    <f7-link icon-fa="link" @click="copyLink">复制链接</f7-link>
                </f7-col>
                <f7-col width="20">
                    <f7-link icon-fa="star">收藏</f7-link>
                </f7-col>
            </f7-grid>
            <f7-button class="btn-cancel" close-picker="#shareToCircle">取消</f7-button>
        </f7-picker-modal>

        <f7-actions id="accusation" :opened="accusationAction" @actions:closed="changeAccusation">
            <f7-actions-group>
                <f7-actions-label>举报问题</f7-actions-label>
                <f7-actions-button>广告、垃圾信息</f7-actions-button>
                <f7-actions-button>淫秽色情、语言暴力</f7-actions-button>
                <f7-actions-button>政治敏感</f7-actions-button>
                <f7-actions-button>假新闻、谣言</f7-actions-button>
                <f7-actions-button>其他</f7-actions-button>
            </f7-actions-group>
            <f7-actions-group>
                <f7-actions-button>完成</f7-actions-button>
            </f7-actions-group>
        </f7-actions>

        <edit-comment :editCommentState="editCommentState" @closeEditComment="closeEditComment"></edit-comment>
    </f7-page>
</template>

<style lang="scss">
    @import "../../assets/css/common.scss";
    .page-news-detail {
        .main {
            padding: 0 15px 10px;
        }

        h2 {
            margin: 10px 0 5px;
            text-align: justify;
        }

        .author {
            margin: 0;
            color: #999;
        }

        .content {
            color: #333;
            text-align: justify;

            img {
                width: 100%;
            }

            p {
                text-indent: 2em;
            }
        }
    }

    #articleOperation {
        text-align: center;

        .row {
            justify-content: flex-start;
            padding: 25px 0;
            border-top: 1px solid #bbb;
        }

        .col-20 {
            margin: 0 10px;

            a {
                color: #666;
            }
        }

        .icon {
            display: block;
            margin-bottom: 3px;
            font-size: 35px;
            color: #666;
        }

        .btn-cancel {
            margin: 0 15px;
            border-color: #999;
            color: #666;
        }
    }

    #accusation {
        .actions-modal-label {
            font-size: 20px;
        }
    }
</style>

<script>
    import editComment from './editComment.vue'
    export default {
        data() {
            return {
                accusationAction: false,
                editCommentState: false
            }
        },
        components: {
            editComment
        },
        methods: {
            openAccusationAction() {
                this.$f7.closeModal('#articleOperation')
                this.accusationAction = true
            },
            changeAccusation() {
                this.accusationAction = false
            },
            copyLink() {
                this.$f7.closeModal('#articleOperation')
                this.$f7.alert('复制成功', '<i class=\'icon fa fa-check-circle-o\' style=\'font-size: 35px;\'></i>')
            },
            openEditComment() {
                this.editCommentState = true
            },
            closeEditComment() {
                this.editCommentState = false
            }
        }
    };
</script>